<template>
    <div class="customer-detail">
        <div class="info-item" v-if="formData.company">
            <normal-title title="公司信息" border></normal-title>
            <div class="form-box">
                <div class="form-item">
                    <span class="label">公司名称</span>:
                    <div class="cont">
                        {{formData.company.name || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">手机号</span>:
                    <div class="cont">
                        <span >{{formData.company.mobile || ''}}</span>
                        <el-input v-if="false" placeholder="请输入手机号码"></el-input>
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">组织机构代码</span>:
                    <div class="cont">
                        {{formData.company.organizingCode || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">类型</span>:
                    <div class="cont">
                        {{formData.company.shopTypeMessage || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">开户状态</span>:
                    <div class="cont">
                        {{formData.company.openAccountStatusMessage || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">绑卡状态</span>:
                    <div class="cont">
                        {{formData.company.bindBankStatusMessage || ''}}
                    </div>
                </div>
                <div class="form-item" v-if="formData.loginTime">
                    <span class="label">注册来源</span>:
                    <div class="cont">
                        {{formData.company.sourceMessage || ''}}
                    </div>
                </div>
            </div>
        </div>
        <div class="info-item"  v-if="formData.salesCompany && formData.salesCompany.id">
            <normal-title title="卖家信息" border></normal-title>
            <div class="form-box">
                <div class="form-item">
                    <span class="label">卖家名称</span>:
                    <div class="cont">
                        {{formData.salesCompany.name || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">手机号</span>:
                    <div class="cont">
                        {{formData.salesCompany.mobile || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">联系人</span>:
                    <div class="cont">
                        {{formData.salesCompany.contacts || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">组织机构代码</span>:
                    <div class="cont">
                        {{formData.salesCompany.organizingCode || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">开店审核状态</span>:
                    <div class="cont">
                        {{formData.salesCompany.olineStatusMessage || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">是否开户</span>:
                    <div class="cont">
                        {{formData.salesCompany.openAccountStatusMessage || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">绑卡状态</span>:
                    <div class="cont">
                        {{formData.salesCompany.bindBankStatusMessage || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">所属地区</span>:
                    <div class="cont">
                        {{formData.salesCompany.province && formData.salesCompany.province.name  || ''}}{{formData.salesCompany.city && formData.salesCompany.city.spell  || ''}}{{formData.salesCompany.area && formData.salesCompany.area.name  || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">注册来源</span>:
                    <div class="cont">
                        {{formData.salesCompany.sourceMessage || ''}}
                    </div>
                </div>
            </div>
        </div>
        <div class="info-item" v-if="formData.salesMan">
            <normal-title title="关联业务员" border></normal-title>
            <div class="form-box">
                <div class="form-item">
                    <span class="label">姓名</span>:
                    <div class="cont">
                        {{formData.salesMan.name || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">手机号</span>:
                    <div class="cont">
                        {{formData.salesMan.phone || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">业务员类型</span>:
                    <div class="cont">
                        {{formData.salesMan.job && formData.salesMan.job.name  || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">状态</span>:
                    <div class="cont">
                        {{formData.salesMan.statusMessage || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">关联时间</span>:
                    <div class="cont">
                        {{formData.salesMan.createTime &&  $normalTime(formData.salesMan.createTime) || ''}}
                    </div>
                </div>
            </div>
        </div>
        <div class="info-item" v-if="formData.licenceces && formData.licenceces.length">
            <normal-title title="资质材料" border></normal-title>
            <div class="qualification-materials">
                <div class="materials-item" v-for="(item, i) in formData.licenceces || []" :key="i">
                     <div class="img-box">
                         <img-upload>
                            <img :src="item.resource && item.resource.url" alt="">
                         </img-upload>
                     </div>
                     <div class="name">{{item.name || ''}}</div>
                     <!-- <div class="type">{{item.typeName || ''}}</div> -->
                     <div class="status">
                         {{item.statusMessage || ''}}
                     </div>
                </div>
            </div>
        </div>
        <div class="control" v-if="false">
            <el-button type="primary" v-if="!isEditer" @click="isEditer = true">编辑</el-button>
            <template v-else>
                <el-button @click="isEditer = false">取消</el-button>
                <el-button type="primary" @click="save">保存</el-button>
            </template>
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
    name: 'customerDetail',
    data () {
        return {
            forms: {
                password: '',
                role: {
                    id: ''
                },
            },
            formData: {},
            isEditer: false,
            roleList: [],
            zzList: [],
        }
    },
    computed: {
        ...mapGetters({
            enumAll: 'common/getEnumAll'
        }),
    },
    created () {
        this.getMsg()
        this.zzList = this.enumAll['EnumLicencesType']
    },
    methods: {
        getMsg () {
            let param = {}
            param = {
                id: this.$route.params.id || ''
            }
            this.$loading(true)
            this.$api.userManage.getCustomerDetail(param).then(r => {
                this.formData = r.data || {}
                this.formData.licenceces = this.formData.licenceces && this.formData.licenceces.length && this.mkDataLicenes(this.$deepCopy(this.formData.licenceces))
            })
            this.$loading(false)
        },
        mkDataLicenes (data) {
            const {zzList} = this
            let arr = []
            arr = zzList.map(r => {
                return {
                    type: r.value,
                    name: r.label,
                    status: 0,
                    statusMessage: '待申请',
                    resource: {
                        type: r.value,
                        url: ''
                    }
                }
            }) || []
            let types = ''
            arr.forEach((r, i) => {
                data && data.length && data.forEach((rr) => {
                    if (rr.type == r.type) {
                        arr[i] = rr
                        types = r.type
                    }
                })
            })
            console.log(arr)
            return arr
        },
        // 保存
        save () {
            const {forms: {password, role: {id}}, formData: {group}} = this
            if (password) {
                if (password.length < 6) {
                    this.$message.error('密码长度不得小于6位')
                    return
                }
            }
            let param = {}
            param = {
                group: {
                    id:group.id
                },
                role: {
                    id
                }
            }
            if (password) param.password = password
            this.$loading(true)
            this.$api.userManage.putUpdateUser(param).then(r => {
                this.$message.success('保存成功')
            }).finally(() => {
                this.$loading(false)
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.customer-detail {
    .info-item {
        background: #fff;
        padding: 10px 10px 0;
        .form-box {
            box-sizing: border-box;
            width: 100%;
            overflow: hidden;
            margin-bottom: 16px;
            .form-item {
                display: flex;
                margin-bottom: 10px;
                min-height: 36px;
                align-items: center;
                font-size: 14px;
                color: #333;
                .label {
                    width: 100px;
                    text-align-last: justify;
                    color: #666;
                }
                .cont {
                    flex: 1;
                    margin-left: 10px;
                    .el-input {
                        width: 300px;
                    }
                    .el-select {
                        width: 300px;
                    }
                }
            }
        }
        .qualification-materials {
            overflow: hidden;
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            padding: 20px 0 0;
            .materials-item {
                width: 200px;
                box-sizing: border-box;
                padding: 10px;
                font-size: 14px;
                color: #333;
                border: 1px solid #ddd;
                border-radius: 2px;
                margin:0 10px 10px 0;

                .img-box {
                    width: 100%;
                    height: 180px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    overflow: hidden;
                    background: #eee;
                    margin-bottom: 10px;
                    img {
                        max-width: 100%;
                        max-height: 100%;
                    }
                }
                .name,.type,.status {
                    line-height: 20px;
                }
            }
        }
    }
    .control {
        padding: 0 0 16px;
    }
}
</style>